<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<script src="js/vue.global.js"></script>
		<style>
			/* 1.li display:inline-block 2.float:left */
			/* 3.ul flex */
			.nav{
				list-style: none;
				width: 800px;
				margin: 50px auto 0;
				padding: 0;
				display: flex;
				background-color: antiquewhite;
			}
			.nav li{
				flex: 1;
				padding: 10px 0;
				text-align: center;
			}
			.nav li:hover{
				cursor: pointer;
				border: 1px solid #ccc;
			}
			.nav li.active{
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul class="nav">
				<!-- <li @click="changeCur(0)" :class="{active: current==0}">23计应1班</li>
				<li @click="changeCur(1)"	:class="{active: current==1}">23计应2班</li>
				<li @click="changeCur(2)"	:class="{active: current==2}">23计应3班</li>
				<li @click="changeCur(3)"	:class="{active: current==3}">23计应4班</li>
				<li @click="changeCur(4)"	:class="{active: current==4}">23计应5班</li> -->
				<li 
					v-for="(vo,idx) in list" 
					@click="changeCur(idx)"
					:class="{active: current==idx}"
				>{{vo}}</li>
				<li :class="{active: current==5}">
					<a href="#" @click.prevent="changeCur(5)">23计应6班</a>
				</li>
			</ul>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						list:[
							'23计应1班',
							'23计应2班',
							'23计应3班',
							'23计应4班',
							'23计应5班'
						],
						current:0
					}
				},
				methods:{
					changeCur(idx){
						// this 指代vue实例
						// this 就近原则
						this.current = idx
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>